import React, { Component } from 'react'
import { AppstoreOutline } from 'antd-mobile-icons'
import axios from 'axios'

export default class login extends Component {

  //获取登录数据
  matter = (value, key) => {
    let { ruleFrom } = this.state
    ruleFrom[key] = value
    this.setState = {
      ruleFrom
    }
  }

  //登录
  Login = (ruleFrom) => {
    console.log(ruleFrom);

    axios({
      url: '/api/login',
      method: 'post',
      data: {
        username: ruleFrom.username,
        password: ruleFrom.password
      }
    }).then(res => {
      if (res.data.code === 1) {
        console.log('1');
        sessionStorage.setItem('token', res.data.token)
        sessionStorage.setItem('name', res.data.datas[0].name)
        sessionStorage.setItem('url', res.data.datas[0].url)

        //跳转
        this.props.history.push('/app/home')
      } else {
        console.log('失败了');
      }
    })
  }

  state = {
    ruleFrom: {},
  }

  render() {
    const { ruleFrom } = this.state
    return (
      <div className="Loginbox">
        <h2>快速登录</h2>
        <div className='ipts'>
          <p>
            <input type='text' placeholder='请输入手机号' value={ruleFrom.username} onChange={(e) => this.matter(e.target.value, 'username')} />
          </p>
          <p>
            <input type='text' placeholder='请输入密码' value={ruleFrom.password} onChange={(e) => this.matter(e.target.value, 'password')} />
          </p>
          <p><button onClick={() => this.Login(ruleFrom)}>登录</button></p>
          <h2>
            <AppstoreOutline className='i' />
            <span>春雨医生</span>
          </h2>
        </div>
      </div>
    )
  }
}
